<template>
    <div  >
      <el-form :model="form" label-width="120px" class="form-container">
        <el-form-item label="表名">
          <el-input v-model="form.tableName" class="input-tableName-width"></el-input>
          
        </el-form-item>
        <el-form-item label="注释">
            <el-input v-model="form.tablezhushi" class="input-tablezhushi-width"></el-input>
        </el-form-item>
        
        <el-form-item label="列定义">
          <el-button type="primary" @click="addColumn" class="add-column-button">添加列</el-button>
          <el-table :data="form.columns" style="width: 100%; height: 550px; max-height: 650px;">
            <el-table-column prop="name" label="列名" min-width="150">
              <template #default="scope">
                <el-input v-model="scope.row.name" class="input-width"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="150">
              <template #default="scope">
                <el-select v-model="scope.row.type" placeholder="请选择类型" class="input-width">
                  <el-option label="VARCHAR" value="VARCHAR"></el-option>
                  <el-option label="INT" value="INT"></el-option>
                  <el-option label="TEXT" value="TEXT"></el-option>
                  <el-option label="DATE" value="DATE"></el-option>
                  <el-option label="DATETIME" value="DATETIME"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="length" label="长度" min-width="100">
              <template #default="scope">
                <el-input v-model.number="scope.row.length" type="number" class="input-width"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="comment" label="注释" min-width="150">
              <template #default="scope">
                <el-input v-model="scope.row.comment" class="input-width"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="100">
              <template #default="scope">
                <el-button type="text" size="small" @click="removeColumn(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="generateTable" class="generate-button">生成表</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import Qs from 'qs'
  import axios from 'axios';
  import request from '../utils/request';
  
  const form = reactive({
    tableName: '',
    tablezhushi:'',
    columns: []
  });
  
  const addColumn = () => {
    form.columns.push({ name: '', type: 'VARCHAR', length: 255, comment: '' });
  };
  
  const removeColumn = (index) => {
    form.columns.splice(index, 1);
  };
  
  const generateTable = async () => {
  if (!form.tableName) {
    ElMessage.error('请输入表名');
    return;
  }
  if (form.columns.length === 0) {
    ElMessage.error('请添加至少一列');
    return;
  }

  try {
    const response = await request.post('/sys/dept/CreateTable', form);
    
    ElMessage.success(response.data);
  } catch (error) {
    console.log(error);
    ElMessage.error(response.data);
  }
};
  </script>
  
  <style scoped>
  .page-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 调整为flex-start，使内容靠上 */
  padding: 1px; /* 减少上下留白 */
}

.form-container {
  width: 100%; /* 调整宽度，使其更宽 */
  max-width: 97%; /* 最大宽度限制 */
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-width {
  width: 100%;
}

.add-column-button {
  margin-bottom: 5px;
}

.generate-button {
  width: 100%;
  margin-top: 10px;
}

.el-form-item {
  margin-bottom: 10px; /* 减少表单项之间的间距 */
}

.el-table {
  margin-top: 20px; /* 减少表格与表单项之间的间距 */
}

.el-table__row {
  height: 50px;
}

.el-table__cell {
  padding: 0;
}

.el-input__inner,
.el-select__caret {
  height: 40px;
  line-height: 40px;
}
.el-table {
    margin-top: 10px; /* 减少表格与表单项之间的间距 */
    height: 500px; /* 这里重复设置高度与模板中一致，确保样式覆盖生效，也可以提取为变量统一管理 */
    max-height: 600px; /* 重复设置最大高度，确保样式覆盖生效 */
    overflow-y: auto; /* 添加这行，使垂直方向超出时出现滚动条 */
}
  </style>